<template>
   <div class="role">
      <!-- 按钮 -->
      <div class="btns">
         <el-button type="primary" @click="dialogVisible = true" class="add-btn">添加</el-button>
      </div>

      <!-- 表格 -->
      <el-table
         :data="roles"
         style="width: 100%; margin-bottom: 20px"
         row-key="id"
         border
         default-expand-all
      >
         <template #empty>
            <el-empty description="暂无数据" />
         </template>
         <el-table-column type="index" label="ID" width="50" />
         <el-table-column prop="name" label="角色名称" />
         <el-table-column prop="description" label="角色描述" />
         <el-table-column prop="icon" label="操作">
            <template #default="{ row }">
               <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
               <el-button type="danger" size="small" @click="handleRemove(row)">删除</el-button>
            </template>
         </el-table-column>
      </el-table>

      <!-- 对话框 -->
      <el-dialog v-model="dialogVisible" :title="(roleItem.id ? '修改' : '添加') + '角色信息'" width="500">
         <el-form :model="roleItem" label-width="50px" label-suffix=":">
         
            <el-form-item label="名称">
               <el-input v-model="roleItem.name" placeholder="请输入角色名称" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述">
               <el-input 
                  v-model="roleItem.description" 
                  placeholder="请输入描述信息" 
                  autocomplete="off"
                  type="textarea"
                  :rows="4"
               />
            </el-form-item>

         </el-form>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="dialogVisible = false">取消</el-button>
               <el-button type="primary" @click="handleSave">
                  {{ roleItem.id ? '修改' : '添加' }}
               </el-button>
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import { getAllRoles, addRole, updateRole, deleteRole } from '@/api/role'
import { ElMessageBox } from 'element-plus'

// 对话框的显示隐藏
const dialogVisible = ref<boolean>(false)

// 所有角色列表
const roles = ref<IRole[]>([])

// 查询所有角色的数据
const getAllRoleList = async () => {
   const res = await getAllRoles()
   roles.value = res.list
}
getAllRoleList()

// 表单中的角色数据
const roleItem = ref<IRole>({
   id: '',
   name: '',
   description: '',
})

// 监视对话框的显示状态
watch(dialogVisible, async(newValue) => {
   if(!newValue) {
      roleItem.value = {
         id: '',
         name: '',
         description: '',
      }
   }
})

// 点击编辑按钮，打开对话框，回显表单数据
const handleEdit = (row: IRole) => {
   // 显示对话框
   dialogVisible.value = true
   roleItem.value = { ...row}
}
// 添加修改角色信息
const handleSave = async() => {
   // 添加
   if(!roleItem.value.id){
      await addRole(roleItem.value)
   }else {
      // 修改
      await updateRole(roleItem.value)
   }
   // 添加成功
   dialogVisible.value = false
   // 重新加载角色列表
   getAllRoleList()
}

// 删除角色
const handleRemove = async(row: IRole) => {
   try {
      const confirmResult =  await ElMessageBox.confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
      })
      if(confirmResult === 'confirm'){
         // 删除角色
         const result = await deleteRole(row.id)
         console.log(result)
         // 重新加载角色数据
         getAllRoleList()
      }
   } catch (error) {
      console.log('删除角色失败', error)
   }
}
</script>

<style lang='scss' scoped>
.role{
   padding: 12px;
}
.add-btn{
   margin-top: -10px;
   margin-bottom: 10px;
}
</style>
